<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%
	String path = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加菜单</title>
<script src="<%=path %>/js/formValidator-4.1.1.js" type="text/javascript" charset="UTF-8"></script>
<script src="<%=path %>/js/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<script src="<%=path %>/js/DateTimeMask.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
	$(function(){
		$.formValidator.initConfig({theme:"126",submitOnce:true,formID:"rForm",
			onError:function(msg){alert(msg);},
			submitAfterAjaxPrompt : '有数据正在验证,请稍候...'
		});
		$("#menuName").formValidator({
			onShowFixText:"菜单名称要见名知意;长度至少为6个字符或3个汉字!",
			onShowText:"请输入菜单名称",
			onFocus:"必须输入菜单名称",
			onCorrect:"菜单名称输入正确"
			}).inputValidator({
				min:6,onError:"资源名称长度至少为6个字符或3个汉字!"
				});
		$("#resName").formValidator({
			onShowFixText:"资源名称必须输入.",
			onShowText:"请输入资源名称",
			onFocus:"必须输入资源名称",
			onCorrect:"资源链接输入正确"
			}).inputValidator({
				min:2,
				onError:"必须输入资源名称!"
				});
		$("#fMenu").formValidator({
			onShowFixText:"父菜单必须选择!如果选择根菜单,则资源名称不可选择",
			onShow:"请选择父菜单",
			onFocus:"父菜单必须选择",
			onCorrect:"父菜单已选择!"
			}).inputValidator({
				min:0,
				onError: "请选择父菜单!"
				});
		 $('#selRes').click(function() {
				$.ajax({
				  url: '<%=path %>/resource/loadAllRes.htm',
				  success: function(data) {
					  var html = "<div style='height:400px;overflow:auto;overflow-x:hidden;'><table border='1' style='border-collapse: collapse; border-color: #D4D4D4;'>";
					  $.each(eval('(' + data + ')'),function(i,content){
						  html = html + "<tr><td><input id='" + content['R_ID'] + "' name='res_id' type='radio' value='" + content['RESOURCE_NAME'];
						  html = html + "'></input></td><td>" + content['RESOURCE_NAME'];
						  html = html + "</td><td>" + content['RESOURCE_URL'];
						  html = html + "</td></tr>";
					  });
					html += "</table></div><div style='text-align:right;padding-right:40px;'><input type='button' id='sel' value='确定'/></div>";
			        $.blockUI({ 
			            theme: true, 
			            title: '请选择资源', 
			            message:  html,
			            themedCSS: {
							width:	'40%',
							top:	'15%',
							left:	'30%'
						}
			        });
			        $('#sel').click(function(){
			        	var v = $(":radio[name='res_id'][checked='checked']");
			        	var resName = v.val();
			        	var resId = v.attr('id');
			        	$.unblockUI({ 
			                onUnblock: function(){
			                	if(resName != undefined && resId != undefined){
			                		$('#resName').val(resName);
				                	$('#resId').val(resId);
			                	}
			                	} 
			            });
			        }); 
				  }
				});	
			 	
		    });  
	});
</script>
</head>
<body>
	<form id="rForm" action="<%=path%>/menu/addMenu.htm" method="post">
		<table border="1" style="width: 100%; border-collapse: collapse; border-color: #D4D4D4;" rules="rows">
			<tr>
			  <td width="20%"></td>
		      <td align="right"><font color="red">* </font>菜单名称:</td>
		      <td><input type="text" id="menuName" name="menu.menuName" style="width:200px" /></td>
		      <td><div id="menuNameTip" style="width:280px"></div></td>
		    </tr>
		    <tr>
		    	<td width="20%"></td>
		        <td align="right">&nbsp;</td>
		        <td colspan="2" valign="top"><div id="menuNameFixTip"></div></td>
		    </tr>
		    <tr>
			  <td width="20%"></td>
		      <td align="right"><font color="red">* </font>父菜单:</td>
		      <td>
					<select id="fMenu" name="menu.fMenu">
						<option value="0">根菜单</option>
					</select>
			 </td>
		      <td><div id="fMenuTip" style="width:280px"></div></td>
		    </tr>
		    <tr>
		    	<td width="20%"></td>
		        <td align="right">&nbsp;</td>
		        <td colspan="2" valign="top"><div id="fMenuFixTip"></div></td>
		    </tr>
		    <tr>
			  <td width="20%"></td>
		      <td align="right"><font color="red">* </font> 资源名称:</td>
		      <td><input type="text" id="resName" name="resName" style="width:200px" disabled="disabled"/>
		      	  <input type="hidden" id="resId" name="resId"></input>
		      	  <input type="button" id="selRes" value="选择资源"/>
		      </td>
		      <td><div id="resNameTip" style="width:280px"></div></td>
		    </tr>
		    <tr>
		    	<td width="20%"></td>
		        <td align="right">&nbsp;</td>
		        <td colspan="2" valign="top"><div id="resNameFixTip"></div></td>
		    </tr>
			<tr>
				<td colspan="2"></td>
				<td style="padding-left: 100px;"><input type="submit" value="提交"></input></td>
			</tr>
		</table>
	</form>
</body>
</html>